<script setup>
import FanOverlay from '..'
import FanButton from '../../button'
import { ref } from 'vue'

const show = ref(false)
const isShow = ref(false)
</script>

<template>
  <div style="height: 300vh;">
    <demo-block title="基础用法">
      <FanOverlay :show="show" @click="show = false" />
      <FanButton @click="show = true">显示遮罩层</FanButton>
    </demo-block>
    <demo-block title="插槽">
      <FanOverlay :show="isShow" @click="isShow = false">
        <div class="block" @click.stop></div>
      </FanOverlay>
      <FanButton @click="isShow = true">插槽</FanButton>
    </demo-block>
  </div>
</template>

<style scoped>
.block {
  width: 100px;
  height: 100px;
  margin-left: 50%;
  margin-top: 50%;
  transform: translate(-50px, -50px);
  background-color: #fff;
}
</style>
